<template>
	<Box>
		<div id="m1_l3_ecs" />
	</Box>
</template>

<script setup>
	import Box from '@com1/Box.vue';
	import * as ecs from 'echarts';
	import { m1Store } from '@st/m1';
	import { onMounted } from 'vue';

	const m1 = m1Store();

	onMounted(() => {
		m1.getL3();
		const chart = ecs.init(document.getElementById('m1_l3_ecs'));
		chart.setOption({
			color: ['#6DD400', '#147EFA'],
			title: {
				text: '支付方式对比',
				textStyle: { color: '#5A9CF8' },
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: { backgroundColor: '#6a7985' }
				}
			},
			legend: {
				data: ['微信', '支付宝'],
				textStyle: { color: '#5A9CF8' },
				right: '0'
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: m1.l3.xData
			}],
			yAxis: [{ type: 'value' }],
			series: [{
				name: '微信',
				type: 'line',
				stack: 'Total',
				smooth: true,
				showSymbol: false,
				lineStyle: { width: 0 },
				areaStyle: { color: '#6DD400' },
				data: m1.l3.wx
			}, {
				name: '支付宝',
				type: 'line',
				stack: 'Total',
				smooth: true,
				showSymbol: false,
				lineStyle: { width: 0 },
				areaStyle: { color: '#147EFA' },
				data: m1.l3.zfb
			}]
		})
	})
</script>

<style lang="less">
	@import "@less";

	#m1_l3_ecs {
		.size(100%, 300px);
	}
</style>